<template>
  <div class="log-content">
    <div class="log-list" v-for="item in logList" :key="item.key">
      <div class="log-detail">
        <icon-font
          class="iconfont"
          v-if="item.type !== 'default'"
          :name="iconName(item.type)"
          :style="iconStyle(item.type)"
        >
        </icon-font>
        {{item.log}}
      </div>
    </div>
    <div class="log-empty" v-if="logList.length === 0">暂无日志信息</div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
  computed: {
    ...mapGetters(['logList'])
  },
  methods: {
    // 图标名称
    iconName (type) {
      switch (type) {
        case 'success': return 'select'
        case 'warning': return 'warning'
        case 'error': return 'error'
        default: return 'default'
      }
    },
    // 图表样式
    iconStyle (type) {
      let color = ''
      switch (type) {
        case 'success': color = '#3399dd'
          break
        case 'warning': color = '#f5bd00'
          break
        case 'error': color = '#f03a17'
          break
        default: color = ''
      }
      return { color }
    }
  }
}
</script>

<style lang="scss" scoped>
.log-content{
  background: #fff;
  height: 100%;
  box-sizing: border-box;
  border-top: 3px solid #efefef;
  overflow-x: hidden;
  overflow-y: auto;
  .log-list{
    .log-detail{
      position: relative;
      padding: 4px 10px 4px 25px;
      color: #363636;
      font-size: 12px;
      border-bottom: 1px solid #f5f5f5;
      word-break: break-all;
      .iconfont{
        position: absolute;
        left: 5px;
        top: 3px;
        font-size: 14px;
      }
    }
  }
  .log-empty{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: #363636;
  }
}
</style>